跳到主要内容

Video and audio on the web

The <video> element​

<video>

<video src= "rabbit320.webm" controls>
  <p>
    Your brower doesn't support HTML video. Hereis a
    <a href= "rabbit320.webm">link to the video</a> instead.
  </p>
</video>

有

  • src attribute
  • controls attribute可以使用browser自己的interface或者用javascript API自定义。
  • The paragraph inside the <video> tags This is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using.

Media file support in browsers​

<video controls>
  <source src= "rabbit320.mp4" type= "video/mp4" />
  <source src= "rabbit320.webm" type= "video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href= "rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

我们把<src>属性从<video>中拿出来然后分开写<source>浏览器会播放第一个支持的。

每个<source>里面有type属性，这个属性可选，但是建议写进去，可以帮助浏览器快速跳过他不认识的格式，如果没有浏览器就会一个一个加载。

另外的<video>特性​

<video
  controls
  width= "400"
  height= "400"
  autoplay
  loop
  muted
  preload= "auto"
  poster= "poster.png">
    <source src="rabbit320.webm" type="video/webm" />
    <source src="rabbit320.webm" type= "video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

width and height 可以用属性或者CSS来控制。但是这两种方法不论怎么设置，视频都会保持原生纵横比。如果原生纵横比跟你设置的不一样。视频会以horizontally的方式填充。没有被填充的部分会以默认背景颜色填充。 autoplay 网页加载完毕立即播放。 loop 播放结束重复 muted 默认静音 poster video没有播放前的图像。适用于splash screen或者广告页。 preload 可以有三种值

  • "none"不加载
  • "auto" 加载
  • "metadata"只加载原数据

The <audio> element​

<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support this audio file. Here is a
    <a href="viper.mp3">link to the audio</a> instead.
  </p>
</audio>
  • 不支持width/height attributes
  • 不支持poster attribute没有视觉组件 别的和<video>一样

Displaying video text tracks​

WebVTT 是一种有多条文本信息的字幕格式。这些字符串被叫做cues,cues有很多种。 subtitles Translations of foreign material, for people who don't understand the words spoken in the audio.

captions Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.

timed descriptions Text which should be spoken by the media player in order to describe important visuals to blind or otherwise visually impaired users.

它长这样

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

…
](webvtt100:00:22.230 --> 00:00:24.606This is the first subtitle.200:00:30.739 --> 00:00:34.074This is the second.%E2%80%A6)

To get this displayed along with the HTML media playback, you need to:

  1. Save it as a .vtt file in a sensible place.
  2. Link to the .vtt file with the <track> element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the kind attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use srclang to tell the browser what language you have written the subtitles in. Finally, add label to help readers identify the language they are searching for.

Here's an example:

<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>

对搜索引擎也有帮助

备注

Note: Text tracks also help you with SEO, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.